import React from "react";
import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Avatar, Card } from "antd";
import useBearStore from "@/store";
const { Meta } = Card;

const PersonalCard: React.FC = () => {
    const {headPic,nickName,userEmail,phoneNumber,signature,hobbies} = useBearStore()
  return (
    <Card
      style={{ width: 450 }}
      cover={
        <img
          alt="example"
          src="https://img2.baidu.com/it/u=1260161787,3362657266&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741453200&t=751ae180f70a2d5edd8b2b084d938de2"
        />
      }
      actions={[
        <SettingOutlined key="setting" />,
        <EditOutlined key="edit" />,
        <EllipsisOutlined key="ellipsis" />,
      ]}
    >
      <Meta
        avatar={
          <Avatar src={headPic} />
        }
        title={nickName}
        description={signature}
      />
      <div style={{margin:"10px",borderTop:"1px solid #ccc", paddingTop:"10px"}}>
        邮箱：{userEmail || '暂未设置邮箱'} 
      </div>

    <div  style={{margin:"10px", paddingTop:"5px"}}>
        电话：{phoneNumber || '暂未填写电话号码'}
    </div>

    <div  style={{margin:"10px", paddingTop:"5px"}}>
        爱好：{hobbies || '暂未填写'}
    </div>
    </Card>
  );
};

export default PersonalCard;
